<div>
    <div>
        <mat-form-field class="model-search-field" appearance="fill">
            <mat-icon matPrefix>search</mat-icon>
            <input matInput type="text" (keydown.enter)="onEnter()" [(ngModel)]="searchVal">
            <button class="clear-btn" *ngIf="searchVal" matSuffix mat-icon-button aria-label="Clear" (click)="onEnter(true)">
                <mat-icon>close</mat-icon>
            </button>
        </mat-form-field>
    </div>
    <div class="model-panel" (scroll)="onScroll($event)">
        <div class="model-desc svg-tool-button" *ngFor="let model of dataList;" matTooltip={{model.name}} [ngClass]="{'svg-tool-active': isModeActive(model.id)}"
            (click)="setImageMode(model)">
            <img src={{model.src}} alt="">
            <span class="model-name">{{model.name}}</span>
        </div>
        <div *ngIf="(currentPage-1)*pageSize>total">到底了，没有更多了……</div>
    </div>
</div>

